<script setup>
import { usePermissionStore } from '@/stores/permission.js'
import { getDisposeOrderFilterOrg } from '@/apis/order.js'

const { user } = usePermissionStore()
const emit = defineEmits([
  'update:show',
  'update:area',
  'reset',
  'confirm'
])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  area: {
    type: Array,
    default: () => []
  }
})

const state = reactive({
  options: []
})
const isShow = computed({
  get: () => props.show,
  set: (val) => {
    emit('update:show', val)
  }
})
const activeArea = computed({
  get: () => props.area,
  set: (val) => {
    emit('update:area', val)
  }
})
async function getOptions() {
  try {
    const res = await getDisposeOrderFilterOrg({ type: 'REGION' })
    if (res.ret === 0) {
      state.options = res.data || []
    }
  } catch (error) {
    /* empty */
  }
}
onMounted(() => {
  getOptions()
})
const toggleState = (item, key = 'value') => {
  const index = activeArea.value.findIndex(
    (selectedItem) => selectedItem[key] === item[key]
  )
  if (index !== -1) {
    activeArea.value.splice(index, 1)
  } else {
    activeArea.value.push(item)
  }
}
const isActive = (item, key = 'value') => {
  return (
    activeArea.value.findIndex(
      (selectedItem) => selectedItem[key] === item[key]
    ) > -1
  )
}
const handleReset = () => {
  activeArea.value = []
  emit('reset')
  setTimeout(() => {
    isShow.value = false
  }, 1000)
}
const handleConfirm = () => {
  isShow.value = false
  emit('confirm')
}
</script>

<template>
  <van-popup
    v-model="isShow"
    :style="{ height: '60%' }"
    close-icon="arrow-down"
    closeable
    custom-style="border-top-left-radius: 3px;height:'30%', border-top-right-radius: 3px;"
    position="bottom"
    round
  >
    <div class="h-full box-border overflow-hidden flex flex-col">
      <div
        class="px-12px flex items-center border-b-1px h-50px border-b-solid border-b-[#F2F5FA]"
      >
        <span class="text-16px font-600 leading-16px text-#171A1D">
          {{ user.level === 2 ? '所属区县' : '所属州市' }}
        </span>
      </div>
      <div
        class="w-full box-border flex-1 pb-65px overflow-x-hidden overflow-y-auto pb-40px"
      >
        <ul class="box-border w-full px-16px box-border">
          <li
            v-for="it in state.options"
            :key="it.areaCode"
            :class="isActive(it, 'areaCode') ? 'active' : ''"
            class="item h-24px relative py-5px text-14px font-400 leading-24px flex justify-between"
            @click="toggleState(it, 'areaCode')"
          >
            <span
              class="flex-1 flex h-full overflow-x-auto whitespace-nowrap"
              >{{ it.name }}</span
            >
            <div class="w-20px h-full flex justify-end items-center">
              <img
                v-if="isActive(it, 'areaCode')"
                alt=""
                class="w-16px h-16px"
                src="@/assets/img/icon_chooseOne.png"
              />
            </div>
          </li>
        </ul>
      </div>
      <div
        class="absolute bottom-0 h-65px pb-15px pt-10px px-12px w-full box-border shadow-[0_-10px_16px_0_#0000000d] bg-#FFFFFF"
      >
        <div class="flex justify-between w-full gap-10px box-border">
          <van-button
            class="w-96px h-40px"
            plain
            type="primary"
            @click="handleReset"
          >
            重置
          </van-button>
          <van-button
            class="w-240px h-40px"
            type="primary"
            @click="handleConfirm"
          >
            确定
          </van-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<style lang="less" scoped>
li.active {
  color: #36b374;
}

li.disabled {
  color: #999999;
}
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-button--plain.van-button--primary {
  color: #07c160;
}

.van-button--plain {
  background-color: #fff;
}
</style>